<template>
  <div class="home">
    <a-typography-title :heading="2" style="text-align: center; margin-bottom: 40px;">
      肺部CT图像辅助诊断系统
    </a-typography-title>
    
    <div class="card-container">
      <a-card class="feature-card" hoverable @click="navigateToWorkflow">
        <template #cover>
          <div class="card-icon-container">
            <icon-apps style="font-size: 48px; color: rgb(var(--success-6));" />
          </div>
        </template>
        <a-typography-title :heading="5">肺部CT诊断工作流</a-typography-title>
        <a-typography-paragraph>完整的诊断流程：上传CT图像、上传病历报告、生成诊断报告</a-typography-paragraph>
      </a-card>
      
      <a-card class="feature-card" hoverable @click="navigateToImagePreview">
        <template #cover>
          <div class="card-icon-container">
            <icon-file-image style="font-size: 48px; color: rgb(var(--primary-6));" />
          </div>
        </template>
        <a-typography-title :heading="5">肺部CT图像预览</a-typography-title>
        <a-typography-paragraph>查看和分析肺部CT图像，支持多种窗宽窗位设置</a-typography-paragraph>
      </a-card>
      
      <a-card class="feature-card" hoverable @click="navigateToLungHealth">
        <template #cover>
          <div class="card-icon-container">
            <icon-heart style="font-size: 48px; color: rgb(var(--danger-6));" />
          </div>
        </template>
        <a-typography-title :heading="5">肺部健康知识科普</a-typography-title>
        <a-typography-paragraph>了解肺部结构功能、常见疾病知识和健康生活方式建议</a-typography-paragraph>
      </a-card>
      
      <a-card class="feature-card" hoverable @click="navigateToNiftiSlicer">
        <template #cover>
          <div class="card-icon-container">
            <icon-scissor style="font-size: 48px; color: rgb(var(--purple-6));" />
          </div>
        </template>
        <a-typography-title :heading="5">3D医学影像切片</a-typography-title>
        <a-typography-paragraph>将NIfTI格式的3D医学影像文件分割成2D切片图像</a-typography-paragraph>
      </a-card>
      
      <a-card class="feature-card" hoverable>
        <template #cover>
          <div class="card-icon-container">
            <icon-robot style="font-size: 48px; color: rgb(var(--success-6));" />
          </div>
        </template>
        <a-typography-title :heading="5">AI辅助诊断</a-typography-title>
        <a-typography-paragraph>利用人工智能技术自动检测肺部病变</a-typography-paragraph>
      </a-card>
      
      <a-card class="feature-card" hoverable>
        <template #cover>
          <div class="card-icon-container">
            <icon-bar-chart style="font-size: 48px; color: rgb(var(--warning-6));" />
          </div>
        </template>
        <a-typography-title :heading="5">统计分析</a-typography-title>
        <a-typography-paragraph>对肺部病变进行定量分析和统计</a-typography-paragraph>
      </a-card>
      
      <a-card class="feature-card" hoverable>
        <template #cover>
          <div class="card-icon-container">
            <icon-file style="font-size: 48px; color: rgb(var(--info-6));" />
          </div>
        </template>
        <a-typography-title :heading="5">报告生成</a-typography-title>
        <a-typography-paragraph>自动生成标准化的肺部CT诊断报告</a-typography-paragraph>
      </a-card>
    </div>
    
    <a-divider style="margin: 40px 0" />
    
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card title="最近检查">
          <a-list>
            <a-list-item v-for="i in 5" :key="i">
              <a-list-item-meta
                title="张三的肺部CT检查"
                description="2023-10-15 | 已完成"
              >
                <template #avatar>
                  <a-avatar shape="square">CT</a-avatar>
                </template>
              </a-list-item-meta>
              <template #actions>
                <a-button type="text" size="small">查看</a-button>
              </template>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="系统公告">
          <a-list>
            <a-list-item v-for="i in 3" :key="i">
              <a-list-item-meta
                :title="`系统公告 ${i}`"
                :description="`2023-10-${10+i} | 系统更新了新的肺部CT分析算法`"
              >
                <template #avatar>
                  <a-avatar shape="square"><icon-notification /></a-avatar>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { 
  IconFileImage, 
  IconRobot, 
  IconBarChart, 
  IconFile,
  IconNotification,
  IconApps,
  IconHeart,
  IconScissor
} from '@arco-design/web-vue/es/icon';

const router = useRouter();

const navigateToImagePreview = () => {
  router.push('/image-preview');
};

const navigateToWorkflow = () => {
  router.push('/workflow');
};

const navigateToLungHealth = () => {
  router.push('/lung-health');
};

const navigateToNiftiSlicer = () => {
  router.push('/nifti-slicer');
};
</script>

<style scoped>
.home {
  padding: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.feature-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px;
  background-color: var(--color-fill-1);
  transition: all 0.3s ease;
}

.feature-card:hover .card-icon-container {
  background-color: var(--color-fill-2);
}

:deep(.arco-card-header) {
  padding: var(--spacing-md);
  border-bottom: none;
}

:deep(.arco-card-body) {
  padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
}

:deep(.arco-typography-title) {
  margin-bottom: var(--spacing-xs);
}

:deep(.arco-typography-paragraph) {
  margin-bottom: 0;
  color: var(--color-text-3);
}

:deep(.arco-divider) {
  margin: var(--spacing-xl) 0;
}

:deep(.arco-row) {
  margin-bottom: var(--spacing-xl);
}

:deep(.arco-list-item) {
  padding: var(--spacing-sm) 0;
  transition: background-color 0.2s;
}

:deep(.arco-list-item:hover) {
  background-color: var(--color-fill-1);
}

:deep(.arco-list-item-meta-title) {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

:deep(.arco-list-item-meta-description) {
  font-size: 12px;
  color: var(--color-text-3);
}

:deep(.arco-avatar) {
  background-color: rgb(var(--primary-2));
  color: rgb(var(--primary-6));
}

:deep(.arco-list-item-action) {
  margin-left: var(--spacing-md);
}

:deep(.arco-btn-text) {
  color: rgb(var(--primary-6));
}
</style> 